<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 3D</title>
    <style>
        .cube-wapper{
            /*transform-style: preserve-3d;*/
            /*transform: rotateX(-30deg) rotateY(45deg);*/
        }
        .cube-box{
            width: 30px;
            height: 100px;
            position: relative;
            transform-style: preserve-3d;
            transform: rotateX(-30deg) rotateY(45deg)
        }
        .cube{
            position: absolute;
            left: 0;
            top: 0;
            /*opacity: .5;*/
        }
        .cube1{
            width: 100%;
            height: 100%;
            background: red;
        }
        .cube2{
            width: 100%;
            height: 100%;
            background: green;
            /*background: red;*/
            transform: rotateY(-90deg)  translate3d(15px,0,15px);
            /*transform-origin: left top;*/
            /*transform: rotateY(-90deg);*/
        }
        .cube3{
            width: 100%;
            height: 100%;
            /*background: blue;*/
            background: red;
            transform-origin: right top;
            transform: rotateY(90deg);
        }
        .cube4{
            width: 100%;
            height: 100%;
            /*background: gray;*/
            background: red;
            transform-origin: right top;
            transform: translateZ(30px);
        }
        .cube5{
            width: 100%;
            padding-top: 100%;
            /*background: pink;*/
            background: red;
            transform-origin: left top;
            transform: rotateX(90deg);
        }
        .cube6{
            width: 100%;
            padding-top: 100%;
            /*background: black;*/
            background: red;
            top: inherit;
            bottom: 0;
            transform-origin: left bottom;
            transform: rotateX(-90deg);
        }
    </style>
</head>
<body>
<div class="cube-wapper">
    <div class="cube-box">
        <div class="cube1 cube"></div>
        <div class="cube2 cube"></div>
        <!--<div class="cube3 cube"></div>-->
        <!--<div class="cube4 cube"></div>-->
        <!--<div class="cube5 cube"></div>-->
        <!--<div class="cube6 cube"></div>-->
    </div>
</div>
<script>
//    let boxs = document.getElementsByClassName('cube-box');
//    setInterval(()=>{
//        for(let item in boxs){
//            if(boxs[item].style) boxs[item].style.height = `${Math.random()*300}px`;
//        }
//    },5000)
</script>

</body>
</html>